<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.7.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var h = 0;
				var m = 0;
				var s = 0;
				var ms = 0;
				var t1;
				$("#btn1").click(function(){
					if($(this).html()=="开始计时"){
						$(this).html("暂停计时");
						t1 = setInterval(function(){
							ms+=13;
							if(ms>=1000){
								ms=ms-1000;
								s++;
							}
							if(s==60){
								s=0;
								m++;
							}
							if(m==60){
								m=0;
								h++;
							}
							$("#pp").html(fn(h)+"时"+fn(m)+"分"+fn(s)+"秒"+fnms(ms)+"毫秒");
						},13)
					}else{
						$(this).html("开始计时");
						clearInterval(t1);
					}
				})
				$("#btn2").click(function(){
					$("#btn1").html("开始计时");
					clearInterval(t1);
					h = 0;
					m = 0;
					s = 0;
					ms = 0;
					$("#pp").html(fn(h)+"时"+fn(m)+"分"+fn(s)+"秒"+fnms(ms)+"毫秒");
				})
				function fn(n){
					return n<10?"0"+n:n;
				}
				function fnms(n){
					if(n<100){
						if(n<10){
							return "00"+n;
						}else{
							return "0"+n;
						}
					}else{
						return n;
					}
				}
			})
		</script>
	</head>
	<body>
		<p id="pp">00时00分00秒000毫秒</p>
		<button id="btn1">开始计时</button>
		<button id="btn2">时间重置</button>
	</body>
</html>
